<template>
  <view class="fix-top-window">
    <view class="uni-header">
      <uni-stat-breadcrumb class="uni-stat-breadcrumb-on-phone" />
      <view class="uni-group">
        <input class="uni-search" type="text" v-model="query" @confirm="search"
          :placeholder="$t('common.placeholder.query')" />
        <button class="uni-button hide-on-phone" type="default" size="mini"
          @click="search">{{$t('common.button.search')}}</button>
        <button class="uni-button" type="primary" size="mini"
          @click="navigateTo('./add')">{{$t('common.button.add')}}</button>
        <button class="uni-button" type="warn" size="mini" :disabled="!selectedIndexs.length"
          @click="delTable">{{$t('common.button.batchDelete')}}</button>
        <button class="uni-button" type="primary" size="mini" :disabled="!selectedIndexs.length"
          @click="openTagsPopup">{{$t('common.button.tagManager')}}</button>
        <!-- #ifdef H5 -->
        <button class="uni-button" type="primary" size="mini"
          @click="$refs.batchSms.open()">{{$t('common.button.sendSMS')}}</button>
        <download-excel class="hide-on-phone" :fields="exportExcel.fields" :data="exportExcelData"
          :type="exportExcel.type" :name="exportExcel.filename">
          <button class="uni-button" type="primary" size="mini">{{$t('common.button.exportExcel')}}</button>
        </download-excel>
        <!-- #endif -->
      </view>
    </view>
    <view class="uni-container">
      <unicloud-db ref="udb" :collection="collectionList" :where="where" page-data="replace" :orderby="orderby"
        :getcount="true" :page-size="options.pageSize" :page-current="options.pageCurrent"
        v-slot:default="{ data, pagination, loading, error, options }" :options="options" loadtime="manual"
        @load="onqueryload">
        <uni-table ref="table" :loading="loading" :emptyText="error.message || $t('common.empty')" border stripe
          type="selection" @selection-change="selectionChange">
          <uni-tr>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'username')" sortable
              @sort-change="sortChange($event, 'username')">用户名</uni-th>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'nickname')" sortable
              @sort-change="sortChange($event, 'nickname')">用户昵称</uni-th>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'mobile')" sortable
              @sort-change="sortChange($event, 'mobile')">手机号码</uni-th>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'integral')" sortable
              @sort-change="sortChange($event, 'integral')">用户积分</uni-th>
            <uni-th align="center" filter-type="select" :filter-data="options.filterData.status_localdata"
              @filter-change="filterChange($event, 'status')">用户状态</uni-th>
            <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'email')" sortable
              @sort-change="sortChange($event, 'email')">邮箱</uni-th>
            <uni-th align="center">角色</uni-th>
            <uni-th align="center" filter-type="select" :filter-data="tagsData"
              @filter-change="filterChange($event, 'tags')">用户标签</uni-th>
            <uni-th align="center">可登录应用</uni-th>
            <uni-th align="center" filter-type="timestamp" @filter-change="filterChange($event, 'last_login_date')"
              sortable @sort-change="sortChange($event, 'last_login_date')">最后登录时间</uni-th>
            <uni-th align="center">操作</uni-th>
          </uni-tr>
          <uni-tr v-for="(item,index) in data" :key="index">
            <uni-td align="center">{{item.username}}</uni-td>
            <uni-td align="center">{{item.nickname}}</uni-td>
            <uni-td align="center">{{item.mobile}}</uni-td>
            <uni-td align="center">{{item.integral}}</uni-td>
            <uni-td align="center">{{options.status_valuetotext[item.status]}}</uni-td>
            <uni-td align="center">
              <uni-link :href="'mailto:' + item.email" :text="item.email"></uni-link>
            </uni-td>
            <uni-td align="center"> {{ item.role }}</uni-td>
            <uni-td align="center">
              <block v-for="(tag,tagIndex) in item.tags" :key="tagIndex">
                <uni-tag type="primary" inverted size="small" :text="tag" v-if="item.tags"
                  style="margin: 0 5px;"></uni-tag>
              </block>
            </uni-td>
            <uni-td align="center">
              <uni-link v-if="item.dcloud_appid === undefined" :href="noAppidWhatShouldIDoLink">
                未绑定可登录应用<view class="uni-icons-help"></view>
              </uni-link>
              {{ item.dcloud_appid }}
            </uni-td>
            <uni-td align="center">
              <uni-dateformat :threshold="[0, 0]" :date="item.last_login_date"></uni-dateformat>
            </uni-td>
            <uni-td align="center">
              <view class="uni-group">
                <button @click="navigateTo('./edit?id=' + item._id, false)" class="uni-button" size="mini"
                  type="primary">{{ $t('common.button.edit') }}</button>
                <button @click="confirmDelete(item._id)" class="uni-button" size="mini"
                  type="warn">{{ $t('common.button.delete') }}</button>
              </view>
            </uni-td>
          </uni-tr>
        </uni-table>
        <view class="uni-pagination-box">
          <uni-pagination show-iconn show-page-size :page-size="pagination.size" v-model="pagination.current"
            :total="pagination.count" @change="onPageChanged" @pageSizeChange="changeSize" />
        </view>
      </unicloud-db>
    </view>
    <!-- #ifndef H5 -->
    <fix-window />
    <!-- #endif -->
    <uni-popup ref="tagsPopup" type="center">
      <view class="tags-manager--x">
        <view class="tags-manager--header mb">管理标签</view>
        <uni-data-checkbox ref="checkbox" v-model="managerTags" class="mb ml" :multiple="true" collection="uni-id-tag"
          field="tagid as value, name as text"></uni-data-checkbox>
        <view class="uni-group">
          <button @click="managerMultiTag" class="uni-button" type="primary" style="margin-right: 75px;">保存</button>
        </view>
      </view>
    </uni-popup>
    <!-- #ifdef H5 -->
    <batch-sms ref="batchSms" toType="user" :receiver="smsReceiver" :condition="smsCondition"></batch-sms>
    <!-- #endif -->
  </view>
</template>

<script>
  import {
    enumConverter,
    filterToWhere
  } from '../../../js_sdk/validator/uni-id-users.js';
  import UniForms from "@/uni_modules/uni-forms/components/uni-forms/uni-forms";
  import UniFormsItem from "@/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item";
  import UniEasyinput from "@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput";

  const db = uniCloud.database()
  // 表查询配置
  const dbOrderBy = 'last_login_date desc' // 排序字段
  const dbSearchFields = ['username', 'nickname', 'role.role_name', 'mobile', 'email', "integral"] // 支持模糊搜索的字段列表
  // 分页配置
  const pageSize = 20
  const pageCurrent = 1

  const orderByMapping = {
    "ascending": "asc",
    "descending": "desc"
  }

  export default {
    data() {
      return {
        collectionList: [db.collection('uni-id-users').field(
          'ali_openid,apple_openid,avatar,avatar_file,comment,dcloud_appid,department_id,email,email_confirmed,gender,invite_time,inviter_uid,last_login_date,last_login_ip,mobile,mobile_confirmed,my_invite_code,nickname,role,score,status,username,wx_unionid,qq_unionid,tags,integral'
        ).getTemp(), db.collection('uni-id-roles').field('role_id, role_name').getTemp()],
        query: '',
        where: '',
        orderby: dbOrderBy,
        orderByFieldName: "",
        selectedIndexs: [],
        pageSizeIndex: 0,
        pageSizeOption: [20, 50, 100, 500],
        tags: {},
        managerTags: [],
        queryTagid: '',
        queryUserId: '',
        options: {
          pageSize,
          pageCurrent,
          filterData: {
            "status_localdata": [{
                "text": "正常",
                "value": 0,
                "checked": true
              },
              {
                "text": "禁用",
                "value": 1
              },
              {
                "text": "审核中",
                "value": 2
              },
              {
                "text": "审核拒绝",
                "value": 3
              }
            ]
          },
          ...enumConverter
        },
        imageStyles: {
          width: 64,
          height: 64
        },
        exportExcel: {
          "filename": "uni-id-users.xls",
          "type": "xls",
          "fields": {
            "用户名": "username",
            "手机号码": "mobile",
            "用户状态": "status",
            "邮箱": "email",
            "角色": "role",
            "用户积分": 'integral',
            "last_login_date": "last_login_date"
          }
        },
        exportExcelData: [],
        noAppidWhatShouldIDoLink: 'https://uniapp.dcloud.net.cn/uniCloud/uni-id?id=makeup-dcloud-appid',
        smsCondition: {}
      }
    },
    onLoad(e) {
      this._filter = {}
      const tagid = e.tagid
      const userId = e.id

      if (tagid) {
        this.queryTagid = tagid
        const options = {
          filterType: "select",
          filter: [tagid]
        }
        this.filterChange(options, "tags")
      }

      if (userId) {
        this.queryUserId = userId
        const options = {
          filterType: "select",
          filter: [userId]
        }
        this.filterChange(options, "_id")
      }
    },
    onReady() {
      this.loadTags()
      if (!this.queryTagid && !this.queryUserId) {
        this.$refs.udb.loadData()
      }
    },
    computed: {
      tagsData() {
        const dynamic_data = []
        for (const key in this.tags) {
          const tag = {
            value: key,
            text: this.tags[key]
          }
          if (key === this.queryTagid) {
            tag.checked = true
          }
          dynamic_data.push(tag)
        }
        return dynamic_data
      },
      smsReceiver() {
        if (this.selectedIndexs.length) {
          let dataList = this.$refs.udb.dataList
          return this.selectedIndexs.map(i => dataList[i]._id)
        } else {
          return undefined;
        }
      }
    },
    methods: {
      onqueryload(data) {
        for (let i = 0; i < data.length; i++) {
          let item = data[i]
          const roleArr = item.role.map(item => item.role_name)
          item.role = roleArr.join('、')
          const tagsArr = item.tags && item.tags.map(item => this.tags[item])
          item.tags = tagsArr
          if (Array.isArray(item.dcloud_appid)) {
            item.dcloud_appid = item.dcloud_appid.join('、')
          }
          item.last_login_date = this.$formatDate(item.last_login_date)
        }
        this.exportExcelData = data
      },
      changeSize(pageSize) {
        this.options.pageSize = pageSize
        this.options.pageCurrent = 1
        this.$nextTick(() => {
          this.loadData()
        })
      },
      openTagsPopup() {
        this.$refs.tagsPopup.open()
      },
      closeTagsPopup() {
        this.$refs.tagsPopup.close()
      },
      getWhere() {
        const query = this.query.trim()
        if (!query) {
          return ''
        }
        const queryRe = new RegExp(query, 'i')

        console.log(
          JSON.stringify(
            db.command.or(
              dbSearchFields.map(name => {
                return {
                  [name]: queryRe
                }
              })
            )
          )
        )

        return db.command.or(
          dbSearchFields.map(name => {
            return {
              [name]: queryRe
            }
          })
        )
        return dbSearchFields.map(name => queryRe + '.test(' + name + ')').join(' || ')
      },
      search() {
        const newWhere = this.getWhere()

        this.where = newWhere
        // 下一帧拿到查询条件
        this.$nextTick(() => {
          this.loadData()
        })
      },
      loadData(clear = true) {
        this.$refs.udb.loadData({
          clear
        })
      },
      onPageChanged(e) {
        this.selectedIndexs.length = 0
        this.$refs.table.clearSelection()
        this.$refs.udb.loadData({
          current: e.current
        })
      },
      navigateTo(url, clear) {
        // clear 表示刷新列表时是否清除页码，true 表示刷新并回到列表第 1 页，默认为 true
        uni.navigateTo({
          url,
          events: {
            refreshData: () => {
              this.loadTags()
              this.loadData(clear)
            }
          }
        })
      },
      // 多选处理
      selectedItems() {
        let dataList = this.$refs.udb.dataList
        return this.selectedIndexs.map(i => dataList[i]._id)
      },
      // 批量删除
      delTable() {
        this.$refs.udb.remove(this.selectedItems(), {
          success: (res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
      // 多选
      selectionChange(e) {
        this.selectedIndexs = e.detail.index
      },
      confirmDelete(id) {
        this.$refs.udb.remove(id, {
          success: (res) => {
            this.$refs.table.clearSelection()
          }
        })
      },
      sortChange(e, name) {
        this.orderByFieldName = name;
        if (e.order) {
          this.orderby = name + ' ' + orderByMapping[e.order]
        } else {
          this.orderby = ''
        }
        this.$refs.table.clearSelection()
        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      },
      filterChange(e, name) {
        this._filter[name] = {
          type: e.filterType,
          value: e.filter
        }
        let newWhere = filterToWhere(this._filter, db.command)

        if (Object.keys(newWhere).length) {
          this.where = newWhere
        } else {
          this.where = ''
        }

        // uni-sms-co
        if (Object.keys(this._filter).length) {
          this.smsCondition = this._filter
        } else {
          this.smsCondition = {}
        }

        this.$nextTick(() => {
          this.$refs.udb.loadData()
        })
      },
      loadTags() {
        db.collection('uni-id-tag').limit(500).get().then(res => {
          res.result.data.map(item => {
            this.$set(this.tags, item.tagid, item.name)
          })
        }).catch(err => {
          uni.showModal({
            title: '提示',
            content: err.message,
            showCancel: false
          })
        })
      },
      managerMultiTag() {
        const ids = this.selectedItems()

        db.collection('uni-id-users').where({
          _id: db.command.in(ids)
        }).update({
          tags: this.managerTags
        }).then(() => {
          uni.showToast({
            title: '修改标签成功',
            duration: 2000
          })
          this.$refs.table.clearSelection()
          this.managerTags = []
          this.loadData()
          this.closeTagsPopup()
        }).catch(err => {
          uni.showModal({
            content: err.message || '请求服务失败',
            showCancel: false
          })
        }).finally(err => {
          uni.hideLoading()
        })
      }
    }
  }
</script>

<style lang="scss">
  .tags-manager {

    &--x {
      width: 400px;
      padding: 40px 30px;
      border-radius: 5px;
      background-color: #fff;
    }

    &--header {
      font-size: 22px;
      color: #333;
      text-align: center;
    }
  }

  .mb {
    margin-bottom: 80px;
  }

  .ml {
    margin-left: 30px;
  }
</style>